<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	</head>
	<body>
		<div id="app">
			<!--订单列表 -->
			<div class="panel panel-primary">
				<div class="panel-heading">
					<h3 class="panel-title">电影订单列表</h3>
				</div>
			</div>
			<!-- 表格 -->
			<table class="table table-bordered" style='text-align: center'>
				<thead>
					<tr>
						<td>选择</td>
						<td>电影</td>
						<td>图片</td>
						<td>票单价</td>
						<td>票数量</td>
						<td>票总价</td>
						<td>删除</td>
						<td>订票</td>
					</tr>
				</thead>
				<tbody class='table-striped nth-child table-hover'>
					<!-- 动态生成列表内容v-for -->
					<tr v-for='item in goodlist' :key='item.id'>
						<td><input type="checkbox" @click='item.selected=!item.selected'></td>
						<td>{{item.name}}</td>
						<td><img :src="item.imgUrl" width="60px" height="30px"></td>
						<td>{{item.price}}</td>
						<td><span @click='item.num>0?item.num--:0'class="btn btn-info btn-sm">-</span>{{item.num}}<span @click='item.num<10?item.num++:10'class="btn btn-info btn-sm">+</span></td>
						<td>{{item.price*item.num}}</td>
						<td><a href="javascript:;" class="btn btn-primary" @click="del(item.id)">删除</a></td>
						<td id="gou"><button @click="buy">购票</button></td>
					</tr>
					<p>总价: {{total_price}} 元</p>
				</tbody>
			</table>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				goodlist: [{
						'id': 1,
						'imgUrl':"img/01.jpg",
						'name': '想您',
						'price': 80,
						'num': 1,
						'selected': false
					},
					{
						'id': 2,
						'imgUrl':"img/02.jpg",
						'name': '地球计划',
						'price': 120,
						'num': 1,
						'selected': false
					},
					{
						'id': 3,
						'imgUrl':"img/03.jpg",
						'name': '不分手的恋爱',
						'price': 50,
						'num': 1,
						'selected': false
					},
					{
						'id': 4,
						'imgUrl':"img/04.jpg",
						'name': 'ink',
						'price': 40,
						'num': 1,
						'selected': false
					}
				],
				totalPrice: ''
			},
			methods: {
				buy: function() {
					alert("购买成功");
				},
				//删除数据
				del(id) {
					var index = this.goodlist.some((item, i) => {
						if (item.id == i) {
							return true;
						}
					});
					this.goodlist.splice(index, 1);
				}
			},
			//computed超好用啊
			computed: {
				'total_price': function() {
					this.totalPrice = 0;
					//在计算总价的时候，由于必须即时变化价格，需要用到computed监听数据，更重要的是需要遍历每一个选中项，把他们求和
					for (var i = 0; i < this.goodlist.length; i++) {
						if (this.goodlist[i].selected) {
							this.totalPrice += this.goodlist[i].price * this.goodlist[i].num;
						}
					}
					return this.totalPrice;
				}
			}
		})
	</script>

</html>
